<script setup lang="ts">
import type { IGetConfigParams } from '@/types/api/index'
import type { IKeyValue, ITableCol, ITableDataSet, ITableRow } from '@/types/index.ts'
import { onBeforeMount, provide, reactive, ref } from 'vue'
import { useRoute } from 'vue-router'
import searchForm from '@/components/searchForm/index.vue'
import VxeTable from '@/components/table/vxeTable/index.vue'
import useDataStore from '@/store/modules/data'

const Route = useRoute()
const dataStore = useDataStore()
const loading = ref(false)

const mainDatas = reactive<ITableDataSet[]>([])
function setBaseData(IDDatas: number[] = []) {
  const IDArr = IDDatas.length ? IDDatas : (Route.meta.dicID as string).split(',').map(val => Number(val))
  IDArr.forEach((val) => {
    mainDatas.push({
      ID: val,
      tableDatas: [] as ITableRow[],
      tableColumns: [] as ITableCol[],
      tableRef: null,
      form: { page: 1, rows: 200 },
      formItems: [],
      loading: false,
      count: 0,
    })
  })
}
async function getConfigData(params: IGetConfigParams[]) {
  loading.value = true
  const res = await dataStore
    .getConfigData(params)
  loading.value = false
  if (!res)
    return
  res.datas.forEach((val, index: number) => {
    mainDatas[index].tableColumns = val
  })
  res.forms.forEach((val, index: number) => {
    mainDatas[index].formItems = val || []
  })
}
async function getDataByID(remark: number = 0) {
  mainDatas[remark].loading = true
  const condition: IKeyValue = { dicID: 1 }
  // form看起来可以替换为pagination
  Object.assign(condition, mainDatas[remark].form)
  // 查询数据绑定在fromItems中
  mainDatas[remark].formItems.forEach(val => condition[val.prop] = val.value)
  if (setCondition && typeof setCondition === 'function')
    setCondition(condition)
  const res = await dataStore
    .getDataByID(condition)
  mainDatas[remark].loading = false
  if (!res)
    return
  mainDatas[remark].tableDatas = res.data
  mainDatas[remark].count = res.count
}
function setCondition(_condition: IKeyValue) {

}

// 查询数据
function search(remark: number, otherConditon: object = {}) {
  const form = mainDatas[remark].form
  Object.assign(form, otherConditon)
  getDataByID(remark)
}
// 重置表单
function reset(remark = 0) {
  mainDatas[remark].formItems.forEach(val => val.value = null)
}
// 输入改变
function input() {
  console.warn('input')
}
// 输入失去焦点或回车
function change(value: any, row: ITableRow, col: ITableCol, type: string | null) {
  console.warn('change', value, row, col, type)
}
const methods = {
  search,
  reset,
  change,
  input,
}
provide('methods', methods)
onBeforeMount(() => {
  setBaseData([15])
  getConfigData([{ ID: 15 }])
    .then(() => getDataByID())
    .then(() => { })
    .catch((err) => {
      console.warn(err)
    })
})
</script>

<template>
  <div v-loading="loading" class="container">
    <searchForm
      :form-items="mainDatas[0].formItems" :form="mainDatas[0].form" :dic-i-d="1" :sign-name="0"
      :remark="0"
    />
    <div class="navbar">
      标题
    </div>
    <div class="content flex-1">
      <template v-for="(item, index) in mainDatas">
        <template v-if="item">
          <VxeTable v-if="index === 0" :key="index" :remark="index" :main-data="item" />
        </template>
      </template>
    </div>
  </div>
</template>

<style scoped lang="scss">
* {
  box-sizing: border-box;
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.navbar {
  padding: 0 10px;
  width: 100%;
  height: 55px;
  line-height: 55px;
}

.content {
  width: 100%;
  flex-grow: 1;
  overflow: hidden;
}
</style>
